<template>
  <div v-if="data!=null">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :lg="8" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总订单数" :total="data.orderNum.allNum">
          <a-tooltip title="所有订单数量" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <div>
            <trend flag="" style="margin-right: 16px;">
              <span slot="term">未支付</span>
              {{ data.orderNum.noPayNum }}
            </trend>
            <trend flag="">
              <span slot="term">未发货</span>
              {{ data.orderNum.payNum }}
            </trend>
          </div>
          <div>
            <trend flag="" style="margin-right: 16px;">
              <span slot="term">未完成</span>
              {{ data.orderNum.sendNum }}
            </trend>
            <trend flag="">
              <span slot="term">已完成</span>
              {{ data.orderNum.finishNum }}
            </trend>
          </div>
          <template slot="footer">本日新增订单数 <span>{{ data.orderNum.todayNum }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :lg="8" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总访问量" :total="data.visitNum.allVisitNum">
          <a-tooltip title="从建站至今的访问量" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <div>
            <mini-area/>
          </div>
          <template slot="footer">{{
              $t('dashboard.analysis.day-visits')
            }}<span> {{ data.visitNum.todayVisitNum }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :lg="8" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总支付钱数" :total="'$ '+data.payNum.totalPrice">
          <a-tooltip title="建站至今的总收款数额" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <div>
            <div>
              <trend flag="" style="margin-right: 16px;">
                <span slot="term">总运费</span>
                $ {{ data.payNum.freightPrice }}
              </trend>
              <trend flag="">
                <span slot="term">商品总额</span>
                $ {{ data.payNum.goodsPrice }}
              </trend>
            </div>
            <div>

            </div>

            <mini-bar/>
          </div>
          <template slot="footer">今日收入 <span>$ {{ data.payNum.todayPrice }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :lg="8" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总用户数" :total="data.userNum.totalUserNum">
          <a-tooltip title="从建站至今的总用户数" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <div>
            <mini-area/>
          </div>
          <template slot="footer">{{ '今日新增用户' }}<span> {{ data.userNum.todayUserNum }}</span></template>
        </chart-card>
      </a-col>
    </a-row>

    <a-card :loading="data==null" :bordered="false" :body-style="{padding: '0'}">
      <template #extra>
        刷新倒计时: {{number}}s
      </template>
      <div class="salesCard">
        <a-tabs default-active-key="1" v-model:activeKey="activeKey" size="large"
                :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <a-tab-pane :forceRender="true" :loading="loading" :tab="$t('dashboard.analysis.sales')" :key="1">
            <a-row>
              <a-col :span="24">
                <div class="echart" id="echart1" :style="{float:'left',width: '95%', height: '400px'}">

                </div>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane :forceRender="true" :tab="$t('dashboard.analysis.visits')" :key="2">
            <a-row>
              <a-col :span="24">
                <div class="echart" id="echart2" :style="{float:'left',width: '95%', height: '400px'}">

                </div>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import * as echarts from 'echarts'

// // prettier-ignore
// const data = [["2000-06-05", 116], ["2000-06-06 23:00", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
// const dateList = data.map(function (item) {
//   return item[0];
// });
// const valueList = data.map(function (item) {
//   return item[1];
// });
// option = {
//
//   title: [
//     {
//       left: 'center',
//       text: 'Gradient along the y axis'
//     }
//   ],
//   tooltip: {
//     trigger: 'axis'
//   },
//   toolbox: {
//     show: true,
//     feature: {
//       saveAsImage: {}
//     }
//   },
//   xAxis: [
//     {
//       data: dateList
//     }
//   ],
//   yAxis: [
//     {}
//   ],
//   grid: [
//     {
//       bottom: '10%'
//     }
//   ],
//   series: [
//     {
//       type: 'line',
//       showSymbol: false,
//       smooth: true,
//       data: valueList
//     }
//   ]
// };


import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  Trend,
  NumberInfo,
  MiniSmoothArea
} from '@/components'
import {baseMixin} from '@/store/app-mixin'
import {getPanel} from "@/api/modules/GoodRequest";

const barData = []
const barData2 = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
  barData2.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
}

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100
  })
}

const searchUserData = []
for (let i = 0; i < 7; i++) {
  searchUserData.push({
    x: moment().add(i, 'days').format('YYYY-MM-DD'),
    y: Math.ceil(Math.random() * 10)
  })
}
const searchUserScale = [
  {
    dataKey: 'x',
    alias: '时间'
  },
  {
    dataKey: 'y',
    alias: '用户数',
    min: 0,
    max: 10
  }]

const searchData = []
for (let i = 0; i < 50; i += 1) {
  searchData.push({
    index: i + 1,
    keyword: `搜索关键词-${i}`,
    count: Math.floor(Math.random() * 1000),
    range: Math.floor(Math.random() * 100),
    status: Math.floor((Math.random() * 10) % 2)
  })
}

const DataSet = require('@antv/data-set')

const sourceData = [
  {item: '家用电器', count: 32.2},
  {item: '食用酒水', count: 21},
  {item: '个护健康', count: 17},
  {item: '服饰箱包', count: 13},
  {item: '母婴产品', count: 9},
  {item: '其他', count: 7.8}
]

const pieScale = [{
  dataKey: 'percent',
  min: 0,
  formatter: '.0%'
}]

const dv = new DataSet.View().source(sourceData)
dv.transform({
  type: 'percent',
  field: 'count',
  dimension: 'item',
  as: 'percent'
})
const pieData = dv.rows

export default {
  name: 'Analysis',
  mixins: [baseMixin],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    if(this.interval!=null){
      clearInterval(this.interval);
    }
    if(this.interval1!=null){
      clearInterval(this.interval1);
    }
  },
  methods: {
    async init() {
      await this.refreshData();
      let _this=this;
      this.interval1=setInterval(async ()=>{
        _this.number--;
        if(_this.number==0){
          await _this.refreshData();
          _this.number=60;
        }

      },1000)
      let echart1 = echarts.init(document.getElementById("echart1"));
      let option = {

        title:
          {
            left: 'center',
            text: '24小时新增订单情况'
          }
        ,
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        xAxis:
          {
            type: 'time',
          },
        yAxis:
          {}
        ,
        grid:
          {
            bottom: '10%'
          }
        ,
        series:
          {
            type: 'line',
            showSymbol: false,
            data: []
          }

      };
      echart1.setOption(option);
      let data=[]
      this.data.orderNum.hourOrderNums.forEach((val)=>{
        data.push({
          value:[val.time,val.num]
        })
      })
      echart1.setOption({
        xAxis:{
            type: 'time',
          },
        series:
          {
            type: 'line',
            showSymbol: false,
            data: data
          }
      });

      // echart2.setOption(option);

    },
    async refreshData() {
      if (this.loading) return;
      this.loading = true;

      let _this = this;
      await getPanel().then((res) => {
        _this.data = res.data;
      })
      this.loading = false;
    },
  },
  data() {
    return {
      number:60,
      interval1:null,
      interval:null,
      data: null,
      loading: false,
      rankList,
      echart: null,
      activeKey: 1,
      // 搜索用户数
      searchUserData,
      searchUserScale,
      searchData,

      barData,
      barData2,

      //
      pieScale,
      pieData,
      sourceData,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      }
    }
  },
  computed: {
    searchTableColumns() {
      return [
        {
          dataIndex: 'index',
          title: this.$t('dashboard.analysis.table.rank'),
          width: 90
        },
        {
          dataIndex: 'keyword',
          title: this.$t('dashboard.analysis.table.search-keyword')
        },
        {
          dataIndex: 'count',
          title: this.$t('dashboard.analysis.table.users')
        },
        {
          dataIndex: 'range',
          title: this.$t('dashboard.analysis.table.weekly-range'),
          align: 'right',
          sorter: (a, b) => a.range - b.range,
          scopedSlots: {customRender: 'range'}
        }
      ]
    }
  },
  watch: {
    activeKey(nVal) {
      let echart;
      if (nVal === 1) {
        echart = echarts.init(document.getElementById("echart1"));
      }else {
        echart = echarts.init(document.getElementById("echart2"));
      }
      this.echart=echart;
      let option = {

        title:
          {
            left: 'center',
            text: nVal===1?'24小时新增订单情况':'24小时网站访问情况'
          }
        ,
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        xAxis:
          {
            type: 'time',
          },
        yAxis:
          {}
        ,
        grid:
          {
            bottom: '10%'
          }
        ,
        series:
          {
            type: 'line',
            showSymbol: false,
            data: []
          }

      };
      echart.setOption(option);
      if(this.interval!=null){
        clearInterval(this.interval);
        this.interval=null;
      }
      let _this=this;
      let f=()=>{
        echart.resize();
        let data=[]
        if(nVal===1){
          _this.data.orderNum.hourOrderNums.forEach((val)=>{
            data.push({
              value:[val.time,val.num]
            })
          })
        }else{
          _this.data.visitNum.hourVisitNumList.forEach((val)=>{
            data.push({
              value:[val.time,val.num]
            })
          })
        }
        echart.setOption({
          xAxis:{
            type: 'time',
          },
          series:
            {
              type: 'line',
              showSymbol: false,
              data: data
            }
        });
      }
      this.interval=setInterval(f(),5000)
    }
  },
  created() {
  }
}
</script>

<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);

  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: color .32s;
    color: black;
  }
}

.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
</style>
